<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>步数管理</title>

<%@ include file="../common.jsp"%>
<script type="text/javascript" src="${path }/static/vender/jquery/jquery.pagination.js"></script>
<script type="text/javascript" src="${path }/static/vender/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${path }/static/vender/highchart/highcharts.js"></script>
<script type="text/javascript" src="${path }/static/vender/highchart/exporting.js"></script>

<style type="text/css">
.list_box {
	/* position: relative; */
	position: fixed;
	width: 567px;
	background: #f3f3f3;
	border: 1px solid #CCC;
}
.keywords_list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.panel-body table td {
	border-top: 0px solid #ddd !important
}
</style>
</head>

<body>
	<%@ include file="../header.jsp"%>

	<div class="container-fluid">
		<div class="row main">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">查询条件</h3>
				</div>
				<div class="panel-body">
					<table class="table">
			            <thead>
			              <tr>
			              </tr>
			            </thead>
			            <tbody>
			              <tr>
			                <td>开始时间</td>
			                <td>
			                	<input id="startTime" name="startTime" type="text" class="form-control" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" check-type="required" required-message="请选择案发时间" readonly />
                  			</td>
			                <td>结束时间</td>
			                <td>
			                	<input id="endTime" name="endTime" type="text" class="form-control" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" check-type="required" required-message="请选择案发时间" readonly />
                  			</td>
			              </tr>
			              <tr>
			                <td>姓名</td>
			                <td><input type="text" class="form-control" id="realyName" name="realyName" placeholder="输入姓名或拼音首写字母"></td>
			                <td>健步组</td>
			                <td>
			                	<select id="groupId" name="groupId" class="form-control" check-type="required" required-message="">
			                		<option value="">加载中 </option>
			                    </select>
			                </td>
			              </tr>
			              <tr>
			                <td colspan="4">
				                <div class="pull-right">
				                	<label>
									  	步数排序 : 
									</label>
									<!-- 
				                	<label class="radio-inline">
									  <input type="radio" name="orderbyType" id="orderby_date" value="1" checked="checked"> 时间
									</label>
									<label class="radio-inline">
									  <input type="radio" name="orderbyType" id="orderby_stepcount" value="2"> 步数
									</label>
									<label class="radio-inline">
									  <input type="radio" name="orderbyType" id="orderby_group" value="3"> 分组
									</label>
									<label> | </label>
									 -->
									<label class="radio-inline">
									  <input type="radio" name="sort" value="0" checked="checked"> 降序
									</label>
									<label class="radio-inline">
									  <input type="radio" name="sort" value="1"> 升序
									</label>
				                	<button type="button" class="btn btn-info" onclick="getReportListData()">&nbsp;查&nbsp;&nbsp;&nbsp;询&nbsp;</button>
				                </div>
			                </td>
			              </tr>
			            </tbody>
			          </table>
				</div>
			</div>
			<div class="tableContent col-sm-12">
				<div id="container" style=""></div>
			</div>
		</div>
	</div>

	<jsp:include page="${pagePath }/footer.jsp"></jsp:include>

	<script type="text/javascript">
		
		$(function(){
			getGroupsName();
			// 添加步数时间默认为昨天
			var defaultDate = new Date(new Date()-(24*60*60*1000));
			$("#startTime").val(defaultDate.format("yyyy-MM-dd"));
			$("#addStepForm").validation({icon:true});
			getReportListData();
		});
		
		function getGroupsName(){
			$.ajax({
				type: 'post',
				url:"getGroupsName",
				async: false, //同步
				success : function(data) {
					console.log("data:"+data);
					$("#groupId").empty();
					$("#groupId").append("<option value=''>全部</option>");
					$.each(data.groups, function(i, item) {
	                	$("#groupId").append("<option value='"+item.id+"'>"+item.groupName+"</option>");
	                });
				},
				error: function(error) {
					$("#groupId").append("<option value=''>加载失败 </option>");
		            alert("getGroupsName 错误代码：" + error.status + "。" + "错误内容:" + error.statusText + "。");
		        }
			});
		}
		
		function getReportListData(){
			var startTime = $("#startTime").val(); 
			var endTime = $("#endTime").val(); 
			var realyName = $("#realyName").val(); 
			var groupId = $("#groupId").val(); 
			var sort = $("input[name='sort']:checked").val();
			var groupName = $("#groupId option:selected").text();
			if(groupName == "全部"){
				groupName = "物联网健步走协会";
			} else {
				groupName = groupName;
			}
			var curentDate = getCurentDate();
			if(startTime != "" && endTime == ""){
				curentDate = startTime + " -- " + curentDate;
			}
			if(startTime != "" && endTime != ""){
				curentDate = startTime + " -- " + endTime;
			}
			if(startTime == "" && endTime == ""){
				curentDate = curentDate;
			}
			$.ajax({
				type: 'post',
				url:"getReportListData",
				data:{
					"startTime" : startTime,
					"endTime" : endTime,
					"realyName" : realyName,
					"groupId" : groupId,
					"sort" : sort
				},
				success : function(data) {
					if(data.hasContent == true){
						$("#container").empty();
						var namesData = [];
						var stepsData = [];
						$.each(data.steps, function(i, item) {
							namesData.push(item.realyName);
							stepsData.push(item.totalNum);
		                });
						$("#container").css("height",(namesData.length*30+150)+"px");
						//highcharts
						 $('#container').highcharts({                                           
						        chart: {                                                           
						            type: 'bar'                                                    
						        },                                                                 
						        title: {                                                           
						            text: groupName+'人员步数排名'                    
						        },                                                                 
						        subtitle: {                                                        
						            text: curentDate                                  
						        },                                                                 
						        xAxis: {                                                           
						            categories: namesData,
						            title: {                                                       
						                text: null                                                 
						            }                                                              
						        },                                                                 
						        yAxis: {                                                           
						            min: 0,                                                        
						            title: {                                                       
						                text: '步数',                             
						                align: 'high'                                              
						            },                                                             
						            labels: {                                                      
						                overflow: 'justify'                                        
						            }                                                              
						        },  
						        legend: {                                                          
						        	enabled : false                                                   
						        },    
						        tooltip: {                                                         
						            valueSuffix: ' 步'                                       
						        },                                                                 
						        plotOptions: {                                                     
						            bar: {                                                         
						                dataLabels: {                                              
						                    enabled: true                                          
						                }                                                          
						            }                                                              
						        },                                                              
						        credits: {                                                         
						            enabled: false                                                 
						        },                                                                 
						        series: [{  
						        	name: '步数',
						        	color: '#00FF00',
						            data: stepsData                                   
						        }]                                                                 
						    });
					} else {
						$("#container").empty();
						$("#container").append('<div class="text-center" style="font-weight: bold; font-size: 28px; color: orange; "> 暂无数据！ </div>');
					}
					
				},
				error: function(error) {
		            alert("getReportListData 错误代码：" + error.status + "。" + "错误内容:" + error.statusText + "。");
		        }
			});
		}
		
		function getCurentDate(){ 
	        var now = new Date();
	       
	        var year = now.getFullYear();       //年
	        var month = now.getMonth() + 1;     //月
	        var day = now.getDate();            //日
	       
	        //var hh = now.getHours();            //时
	        //var mm = now.getMinutes();          //分
	       
	        var clock = year + "-";
	       
	        if(month < 10)
	            clock += "0";
	       
	        clock += month + "-";
	       
	        if(day < 10)
	            clock += "0";
	           
	        clock += day + " ";
	       
	        //if(hh < 10)
	        //    clock += "0";
	           
	        //clock += hh + ":";
	        //if (mm < 10) clock += '0'; 
	        //clock += mm; 
	        return clock; 
	    } 
		                                                                                                                                           				
	</script>
</body>
</html>